<template>
	<view class="page">
		<u-navbar bgColor='#4871C0' :titleStyle="{ color: '#FFF'}" title="录入校长交办事项" leftIconColor="#FFF"
			 @leftClick="leftClick">
		</u-navbar>
		<u-collapse ref="collapse" class="collapse" accordion v-model="value">
			<u-collapse-item v-for="(item,index) in list" :key="index" :title="item.name" :name="index">
				<view class="collapse-box">
					<view class="head">完成情况</view>
					<view class="content">
						<text class="text"> {{item.content}}</text>
						<view class="btns">
							<u-button class="btn" text="编辑" @click="edit(item.id)" color="#4871C0" plain></u-button>
							<u-button class="btn" text="删除" type="primary" color="#4871C0" @click="del(item.id)">
							</u-button>
						</view>
					</view>

				</view>

			</u-collapse-item>
		</u-collapse>
		<u-button class="sub-btn" text="提交" type="primary" color="#4871C0"></u-button>
		<u-modal :show="delModal.show" title="删除确认" content='是否确认删除该项数据 ?' showCancelButton @confirm="confirm"
			@cancel="delModal.show=false"></u-modal>
	</view>
</template>

<script>
	import {
		getList,
		delplan
	} from '@/api/feedbackApi.js'
	export default {
		name: "feedback-edit",
		data() {
			return {
				delModal: {
					show: false
				},
				list: [],
				id: '',
				chooseId: '',
				value: ['0'],
				content: '折叠内容主体，可自定义内容及样式，点击按钮修改内容使高度发生变化。',
			}
		},
		onLoad(option) {
			this.id = option.id
		},
		onShow() {
			this.getData()
			this.add()
		},
		methods: {
			add() {
				// TODO 小程序中不支持自动更新 ，需要手动resize 更新组件高度
				// #ifdef MP
				this.$nextTick(() => {
					this.$refs.collapse.resize()
				})
				// #endif
			},
			getData() {
				this.isLoading = true;
				let params = {
					meet_id: this.id,
				};
				getList(params).then(res => {
					this.isLoading = false;
					this.list = res.data;
					this.add()
				})
			},
			edit(id) {
				uni.navigateTo({
					url: '/pages/feedback/feedback-edit-content?id=' + id + '&meet_id=' + this.id
				})
			},
			del(id) {
				this.delModal.show = true;
				this.chooseId = id;
			},
			confirm() {
				this.isLoading = true;
				let params = {
					department_id: this.chooseId,
					meet_id: this.id,
				};
				delplan(params).then(res => {
					this.isLoading = false;
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 1000
					});
					if (res.code == 1) {
						this.getData()
					}
					this.delModal.show = false;
				})
			},
			leftClick(){
				uni.navigateTo({
					url: '/pages/tabbar-1-detial/meetingDetails/meetingDetails?id=' + this.id
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	$font-color: #4871c0;
	$bg-color: #4871C0;

	.page {
		background: #F8F8F8;

		/deep/ .u-collapse-item .u-collapse-item__content {
			// border: 1px solid red !important;
			// height: auto!important;
		}

		.collapse {


			/deep/.u-collapse-item__content__text {
				padding: 0;
			}

			.head {
				color: $font-color;
				font-weight: bold;
				font-size: 15px;
				margin: 12px;
			}

			.content {
				color: #8b8b8b;
				padding: 0 20rpx;
			}

			.btns {
				display: flex;
				width: fit-content;
				margin-left: auto;

				.btn {
					margin: 10px;
					border: 1px solid $bg-color;
					border-radius: 10px;
					padding: 0 20px;
				}
			}
		}

		.sub-btn {
			position: absolute;
			width: 90%;
			bottom: 10px;
			left: 20px;
		}

		/deep/.u-modal__content__text {
			text-align: center;
		}
	}
</style>
